<template>
	<view style="">
		<image @click="show = true" src="/static/images/icon_emjo.png" style="width: 62rpx;height: 62rpx;" mode=""></image>
		<view v-if="show" style="position: fixed;bottom: 100rpx;left: 0rpx;width: 100%;z-index: 9999;display: flex;justify-content: space-between;height: 100vh;flex-direction: column;">
			<view @click="show = false" style="flex:1;">
				
			</view>
			<view style="width: 100%;padding: 30rpx;display: flex;flex-wrap: wrap;justify-content: space-evenly;background: #ffffffee;">
				<image @click="select(item)" v-for="(item,k) in keys" :src="`/static/images/emoji/EMOJI-${item}.png`" style="width: 60rpx;height: 60rpx;margin: 17rpx;" mode=""></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				show:false,
				keys:[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21]
			}
		},
		props:{
			onSelect:{
				type:Function
			}
		},
		methods:{
			select:function(k){
				this.show = false
				this.onSelect(k)
			}
		}
	}
</script>

<style>
</style>